<template>
    <div class="container">
        <el-row class="wrap-search">
            <el-button @click="" type="primary" icon="el-icon-edit" size="medium" @click="$router.push('/userCreate')">新建用户</el-button>
        </el-row>
        <el-row class="wrap-search">
            <div class="search-item">
                <div class="search-title">状态：</div>
                <el-select v-model="configList.param.status" placeholder="请选择">
                    <el-option
                            v-for="item in statusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
             <div class="search-item">
                <div class="search-title">手机号：</div>
                <el-input v-model="configList.param.phone_num" placeholder="请输入手机号"></el-input>
            </div>
            <el-button icon="el-icon-search" class="search-btn" type="primary" @click="getList()">查询</el-button>
        </el-row>
        <div class="">
            <table-list ref="tableList" :tableConfig='configList' @selectTable="selectTable">
                <el-table-column
                        slot="select"  align="center" label="全选"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column slot="created_at"  align="center" label="时间" width="200px">
                    <template slot-scope="scope">
                        <div>{{_dateFormate(scope.row.created_at)}}</div>
                    </template>
                </el-table-column>
                <el-table-column slot="status"  align="center" label="审核状态">
                    <template slot-scope="scope">
                        <div>{{scope.row.status == 0 ? '无效' : (scope.row.status == 1 ? '已认证' : (scope.row.status == 2 ? '未认证' : ''))}}</div>
                    </template>
                </el-table-column>
                <el-table-column slot="charge"  align="center" label="添加余额" width="200px">
                    <template slot-scope="scope">
                        <div>
                            <el-input v-model="scope.row['var']" style="width: 80px;"></el-input>
                            <el-button size="mini" @click="handleAdd(scope.row)" >添加</el-button>
                        </div>
                    </template>
                </el-table-column>
                  <!--<el-table-column slot="image"  align="center" label="用户头像">-->
                      <!--<template slot-scope="scope">-->
                        <!--&lt;!&ndash;<img class="video-img" :src="scope.row.avatarUrl" alt="">&ndash;&gt;-->
                          <!--<div :style="{backgroundImage: 'url('+scope.row.avatarUrl+')'}" style="width: 60px;height: 60px;background-size: cover;border-radius: 30px;margin: 0 auto;"></div>-->
                      <!--</template>-->
                  <!--</el-table-column>-->
                  <el-table-column class="btn"  width="200px" label="操作" slot="btn" align="center" >
                    <template slot-scope="scope">
                       <!--<el-button  @click="$router.push('/userDetail?id='+scope.row.id)" type="primary" size="small">查看详情</el-button>-->
                        <el-button icon="el-icon-info"  @click="handleClickDetail(scope.row.id)" type="primary" size="small">查看详情</el-button>
                        <el-button icon="el-icon-info"  @click="handleFrozen(scope.row.id)" type="primary" size="small" v-if="scope.row.is_frozen == 0">冻结用户</el-button>
                        <el-button icon="el-icon-info"  @click="handleNoFrozen(scope.row.id)" type="primary" size="small" v-else-if="scope.row.is_frozen == 1">解冻用户</el-button>
                        <!-- <el-button v-if="scope.row.isRefundBtn == 'y'" class="search-btn" size="small" type="danger" @click="refundBtn(scope.row.id)">退款</el-button> -->
                    </template>
                  </el-table-column>
            </table-list>
        </div>

        <el-dialog
                :visible.sync="dialogModalVisible"
                size="tiny"
        >
            <div class="wrap">
                <div class="flex-box-container item">
                    <div>身份证正面:</div>
                    <div @click="handle('id_card_front')">
                        <img :src="detail.id_card_front" alt="" style="width:100px;">
                    </div>
                </div>
                <div class="flex-box-container item">
                    <div>身份证反面:</div>
                    <div @click="handle('id_card_back')">
                        <img :src="detail.id_card_back" alt="" style="width:100px;">
                    </div>
                </div>
                <div class="flex-box-container item">
                    <div>手持身份证照片:</div>
                    <div @click="handle('id_card_in_hand')">
                        <img :src="detail.id_card_in_hand" alt="" style="width:100px;">
                    </div>
                </div>
                <div class="flex-box-container item">
                    <div>审核状态:</div>
                    <div>
                        {{detail.status == 0 ? '用户已失效' : (detail.status == 1 ? '审核通过' : (detail.status == 2 ? '待审核' : (detail.status == 3? '审核不通过' : '')))}}
                    </div>
                </div>
                <div v-if="detail.status == 2">
                    <el-button  @click="handleVerify(1)" type="primary" size="small">审核通过</el-button>
                    <el-button  @click="handleVerify(3)" type="danger" size="small">审核不通过</el-button>
                </div>

            </div>
        </el-dialog>
        <el-dialog title="缩略图" custom-class="w30" size="tiny" :visible.sync="dialogVisible">
            <img :src="avatar" alt="" style="width: 400px;">
        </el-dialog>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
import TableList from "../common/my-table";
export default {
    data() {
        return { 
            configList:{
                url:CONSTANT.URL.userList,
                data: [],
                configList:[
                    {
                       slot: "select"
                    },
                    {  
                      slot:'image'
                    },
                    {
                       label:'用户ID(手机号)',
                       prop:'phone_num'
                    },
                    {
                       label:'邀请码',
                       prop:'invitation_code'
                    },
                    {
                        label:'累计充值金额',
                        prop:'total_recharge'
                    },
	                {
		                label:'累计购物金额',
		                prop:'total_purchase'
	                },
	                {
		                label:'余额',
		                prop:'balance'
	                },
	                {
		                label:'积分',
		                prop:'point'
	                },
	                {
		                label:'静态收益',
		                prop:'static_income'
	                },
	                {
		                label:'动态收益',
		                prop:'dynamic_income'
	                },
	                {
		                label:'团队奖',
		                prop:'team_bonus'
	                },
	                {
		                label:"点券",
		                prop:'coupon'
	                },
	                {
		                slot:'created_at'
	                },
	                {
		                slot: "status"
	                },
                    {
                        slot: "charge"
                    },
                    {
                      slot:'btn'
                    }
                ],
                param:{
                    status: "",
                    phone_num: ""
                },
                type:'',
                width:'',
                isPagination:true
            },
            dialogVisible:false,
	        dialogModalVisible: false,
            detail: {},
            imgUrl: "",
            avatar: "",
	        statusList: [{
		        label: "全部",
		        value: ""
	        },{
		        label: "无效",
		        value: 0
	        },{
		        label: "已认证",
		        value: 1
	        },{
		        label: "未认证",
		        value: 2
	        }]
        }
    },
    components: {
        'table-list': TableList
    },
    created(){

    },
    mounted() {
    },
    methods: {
        handleFrozen(id) {
            let  url = CONSTANT.URL.freeze,
                param = {user_id: id, status: 1}
            common.requestAjax(url,param, {},(res)=> {
                if (res.status == 0) {
                    this.$message({
                        type: 'success',
                        message: '冻结成功'
                    });
                    this.getList()
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }
            })
        },
        handleNoFrozen(id) {
            let  url = CONSTANT.URL.freeze,
                param = {user_id: id, status: 0}
            common.requestAjax(url,param, {},(res)=> {
                if (res.status == 0) {
                    this.$message({
                        type: 'success',
                        message: '解冻成功'
                    });
                    this.getList()
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }
            })
        },
        handleAdd(item) {
            let  url = CONSTANT.URL.manual,
                param = {user_id: item.id, var: item.var}
            common.requestAjax(url,param, {},(res)=> {
                if (res.status == 0) {
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    });
                    this.getList()
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }
            })
        },
        getList(){
            this.$refs.tableList.getList()
        },
	    _dateFormate(value) {
		    return common.dateFormate(value)
	    },
	    getDetail(id) {
		    let  url = CONSTANT.URL.userDetail;
		    common.requestGetAjax(url,{}, {user_id: id},(res)=>{
			    if(res.status == 0){
				    this.detail = res.data
			    }else{
				    this.$message({
					    message: res.msg,
					    type: 'warning'
				    });
			    }
		    })
	    },
	    handleClickDetail(id) {
        	this.dialogModalVisible = true
        	this.getDetail(id)
        },
	    handleVerify(status) {
		    let  url = CONSTANT.URL.userVerify,
			    param = {user_id: this.detail.id, status: status}
		    common.requestAjax(url,param, {},(res)=>{
			    if(res.status == 0){
				    this.$message({
					    type: 'success',
					    message:status == 1 ? '审核通过' : (status == 3 ? '审核未通过' : '')
				    });
				    setTimeout( () => {
					    this.dialogModalVisible = false
                        this.getList()
				    }, 1500)
			    }else{
				    this.$message({
					    message: res.msg,
					    type: 'warning'
				    });
			    }
		    })
	    },
	    handle(img) {
		    this.avatar = this.detail[img]
		    this.dialogVisible = true
	    },
        hotBtn(id,state){
            let  url = CONSTANT.URL.CAR.SAVEHOT,
                dataForm = {},
                data = {
                    isHot:state?'':1,
                    id:id
                };
            common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({           
                            message: res.msg,           
                            type: 'warning'         
                        });
                    }
                }) 
        },
        delLevel(id){
            this.$confirm('确定删除?', '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.USERCORE.DELETEITEM,
                    param = {id: id}
                common.requestAjax(url,{},param,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({           
                            message: res.msg,           
                            type: 'warning'         
                        });
                    }
                }) 
   
            }).catch(() => {           
                this.$message({             
                    type: 'info',             
                    message: '已取消删除'           
                });                   
            });   
        },
        upBtn(id){
            this.$confirm('确定上架?', '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.CAR.SETDELETE,
                    param = {id:id,status:'on'}
                common.requestAjax(url,JSON.stringify(param),null,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({           
                            message: res.msg,           
                            type: 'warning'         
                        });
                    }
                }) 
   
            }).catch(() => {           
                this.$message({             
                    type: 'info',             
                    message: '已取消上架'           
                });                   
            });   
        },
        downBtn(id){
            this.$confirm('确定下架?', '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.CAR.SETDELETE,
                    param = {id:id,status:'off'}
                common.requestAjax(url,JSON.stringify(param),null,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({           
                            message: res.msg,           
                            type: 'warning'         
                        });
                    }
                }) 
   
            }).catch(() => {           
                this.$message({             
                    type: 'info',             
                    message: '已取消下架'           
                });                   
            });   
        },
        handleRemove(file, fileList) {      // 图片上传
            let deleteUrl = file.url;
            let list = this.information.images;
            list.forEach(function(item,index){
                if(item.fileUrl == deleteUrl){
                    list.splice(index,1);
                }
            })
            console.log(list);
            this.information.images = list;
        },       
        handlePictureCardPreview(file) {    
            this.dialogImageUrl = file.url;         
            this.dialogVisible = true;      
        },
        handleFileSuccess(res, file) {
            if(res.status == 200){
                let picItem = res.data.bussData;
                this.information.images.push(picItem);
                this.fileListChange();
            }
        },
        selectTable(val) {
            console.log(val)
            this.ids = []
            val.map( item => {
                this.ids.push(item.id)
            })
        },
        delAll() {
            if (!this.ids.length) {
                this.$message({
                    type: 'warning',
                    message: '请选择批量删除的记录'
                });
                return false;
            }
            this.$confirm('确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let url = CONSTANT.URL.USERCORE.DELETES;
                common.requestAjax(url, {}, {ids: this.ids}, (res) => {
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

<style lang="scss">
    .container {
        .wrap {
            .item {
                font-size: 15px;
                margin-bottom: 30px;
                div{
                    &:first-child {
                        width: 120px;
                    }
                }
            }
        }
        .wrap-search{
            margin-bottom: 20px;
            .search-item{
                float: left;
                margin-right: 20px;
                margin-top: 20px;
                .el-input,.el-select{
                    width: 180px;
                }
            }
            button{
                float: left;
                margin-top: 20px;
            }
            .search-title{
                display: inline;
                width: 100px;
                height: 36px;
                line-height: 36px;
                text-align: right;
                margin-bottom: 20px;
                margin-right: 10px;
            }
        }
        .el-table__row{
            .cell{
                button{
                    margin-top: 10px;
                }
            }
            video{
                width: 100px;height: auto;
            }
            img.video-img{
                width: 60px;height: 60px;
                cursor: pointer;
                border-radius: 30px;
            }
        }
        .pagination {
            text-align: center;
            width: 80%;
            margin-top: 60px;
        }
        .el-dialog__body{
            img{
                display: block;
                margin: 0 auto;
            }
        }
        .user-num{
            color:#409EFF;
            cursor: pointer;
        }
        
        .avatar{
            width: 50px!important;
            height: 50px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
        }
    }
</style>
